<template>
  <section class="vipcard-use-cart">
    <nav-bar>
      <div class="center" slot="center">兑换会员</div>
    </nav-bar>
    <p class="title">
      成功兑换后将关联到当前帐号： <span>{{ user.username }}</span>
    </p>
    <section class="input">
      <input type="text" placeholder="请输入10位卡号" v-model="cardNumber" />
      <input type="text" placeholder="请输入6位卡密" v-model="carmichael" />
    </section>
    <input
      type="button"
      value="兑换"
      class="exchange"
      :style="{ backgroundColor: isActive ? '#4cd964' : '#cccccc' }"
      @click="handleExchange"
    />
    <section class="tips">
      <p class="title">——温馨提示——</p>
      <ul>
        <li>新兑换的会员服务，权益以「会员说明」为准。</li>
        <li>月卡：30次减免配送费。</li>
        <li>季卡：90次减免配送费。</li>
        <li>年卡：360次减免配送费。</li>
        <li>
          ＊仅限蜂鸟专送订单，每日最多减免3单，每单最高减免4元（一个月按31天计算）
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      cardNumber: "",
      carmichael: "",
      isActive: false,
    };
  },
  props: {
    user: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    cardNumber(value) {
      this.cardNumber = value.length > 10 ? value.substring(0, 10) : value;
      if (Number(value) && Number(this.carmichael)) {
        this.isActive =
          value.length >= 10 && this.carmichael.length >= 6 ? true : false;
      }
    },
    carmichael(value) {
      this.carmichael = value.length > 6 ? value.substring(0, 6) : value;
      if (Number(value) && Number(this.cardNumber)) {
        this.isActive =
          value.length >= 6 && this.cardNumber.length >= 10 ? true : false;
      }
    },
  },
  methods: {
    handleExchange() {
      const data = {
        number: this.cardNumber,
        password: this.carmichael
      }
      this.isActive ? this.$bus.$emit('handleExchange',data) : ''
    }
  },

  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
@import url('assets/css/mixin');
.vipcard-use-cart {
  .initial-children();
  background-color: #f5f5f5;
  .title {
    padding: 10px 20px;
    font-size: 14px;
    span {
      font-weight: 900;
    }
  }
  .input {
    input {
      width: 100%;
      padding: 12px 20px;
      color: #757575;
    }
  }
  .exchange {
    .determine();
    margin: 20px auto;
  }
  .tips {
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    color: #bfbfbf;
    ul {
      text-align: left;
      margin: 0 60px;
    }
  }
}
</style>